<template>
  <div class="container">
    <div class="nav">
      <van-icon name="cross" size="large" @click="cancelPublish"/>
      <div>发布挂失</div>
      <van-button round type="success" style="width: 60px; height:30px" @click="publishSeek"> 发布 </van-button>
    </div>
    <div class="post-img">
      <van-uploader 
        v-model="fileList" 
        multiple
        :max-count="9"
        :before-read="beforeRead"
      />
    </div>
    <div class="desc">
      <textarea placeholder="添加描述" rows="10" cols="10" v-model="seekForm.seekContent"/>
    </div>
    <div class="address">
      <p>丢失地址</p>
      <input type="text" v-model="seekForm.position">
      <div>请选择<van-icon name="arrow" /></div>
    </div>
    <div class="reward">
      <p>赏金<span> (选填)</span></p>
      <div class="reward-yuan"><input type="text" v-model="seekForm.reward"></div>
    </div>
    <div class="statement">注：本平台只提供基础的信息服务，不提供后续的交易服务，
      请您注意人身与资金安全，谨防受骗上当</div>

  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import {showToast} from 'vant'
import { publishSeeking } from '../api';
import { useUserInfoStore } from '../stores/userInfo';

const userInfoStore = useUserInfoStore()
const router = useRouter()
// 取消发布
const cancelPublish = () => {
  router.back()
}

// 图片上传前校验
const beforeRead = (file) => {
  const validTypes = ['image/jpeg', 'image/png', 'image/gif']
  const isLt5M = file.size / 1024 / 1024 < 5
  
  if (!validTypes.includes(file.type)) {
    showToast('请上传JPG/PNG格式图片')
    return false
  }
  
  if (!isLt5M) {
    showToast('图片大小不能超过5MB')
    return false
  }
  
  return true
}
const fileList = ref([]);

const seekForm = ref({
  seekContent:null,
  seekAutorId:null,
  seekAutorName:null,
  seekCreateTime:null,
  position:null,
  reward:null
})

const publishSeek = async () => {
  // 表单验证
  if (!seekForm.value.seekContent) {
    showToast('请填写描述内容')
    return
  }
  
  if (!seekForm.value.position) {
    showToast('请填写丢失地址')
    return
  }

  try {
    // 准备表单数据
    const formData = new FormData()
    
    // 添加文本字段
    formData.append('seekContent', seekForm.value.seekContent)
    formData.append('position', seekForm.value.position)
    formData.append('seekAutorName',userInfoStore.username)
    formData.append('seekAutorId',userInfoStore.userId)
    seekForm.value.reward && formData.append('reward', seekForm.value.reward)
    
    // 添加图片文件
    fileList.value.forEach(file => {
      if (file.file) {
        formData.append('images', file.file)
      }
    })
    console.log(formData);
    
    // 提交数据
    const response = await publishSeeking(formData)
    showToast('发布成功')
    router.push('/')
    // if(response.data.code == 200){
    //   // 处理成功响应
    //   showToast('发布成功')
    //   router.push('/') // 返回首页
    // }
    
    
  } catch (error) {
    console.error('发布失败:', error)
    showToast('发布失败，请重试')
  }
}
</script>

<style lang='less' scoped>
.container{
  
  .nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:10px;
  }
  .post-img{
    margin: 20px;
  }
  .desc{
    position: relative;
  }
  textarea{
    
    padding: 10px;
    background-color: #F7F8FA;
    border: none;
    width: 100vw;
    height: 30vh;
    border-radius: 10px;
  }
  
  .desc::after {
  content: "0/500";
  position: absolute;
  right: 20px;
  bottom: 20px;
  color: #999;
  pointer-events: none;
  }
  .address,.reward{
    display: flex;
    width: 100vw;
    justify-content: space-between;
    align-items: center;
    background-color: #F7F8FA;
    padding: 0 10px;
    position: relative;
    div{
      color: #999;
    }
    span{
      color: #999;
    }
    input{
      display: block;
      border: none;
      background-color: #F7F8FA;
    }
    .reward-yuan::after{
      content: '元';
      position: absolute;
      right: 20px;
      bottom: 16px;
      color: #999;
      pointer-events: none;
    }
  }
  .statement{
    margin: 10px;
    color: #999;
    font-size: 13px;
  }
}
  
</style>